<template>
    <div class="container">
        <div class="heade">
            <div class="header">
                <span class="text">基本信息</span>
            </div>
            <div class="heade-text1">
                <div>
                    <span>供货厂商：</span>{{basicInformation.vendorName}}<span></span>
                </div>
                <div><span>付款类型：</span><span>{{basicInformation.paymentType}}</span></div>
                <div><span>审批人：</span><span>{{basicInformation.employee2Name}}</span></div>
                <div><span>采购日期：</span><span>{{basicInformation.createTime|dateFormat}}</span></div>
                <div><span>审批状态：</span>
                    <span v-if="basicInformation.status === 0" style="color: #666666">待审批</span>
                    <span v-else-if="basicInformation.status === 1" style="color: #FFCC00">已通过</span>
                    <span v-else-if="basicInformation.status === 2" style="color: #3399FF">已入库</span>
                    <span v-else-if="basicInformation.status === 3" style="color: #FF0000">未通过</span>
                </div>
            </div>
        </div>
        <div class="end" >
            <div class="header">
                <span class="text">商品明细</span>
            </div>
            <div class="between-table">
                <el-table
                    :header-cell-style="{fontSize: '14px',textAlign: 'center'}" 
                    :cell-style="{fontSize: '12px',textAlign: 'center'}"
                    :row-class-name="'fixed-row-height'"
                    ref="multipleTable"
                    :data="tableData"
                    border
                    tooltip-effect="dark"
                    style="width: 100%"
                    @selection-change="handleSelectionChange">
                    <el-table-column label="序号">
                        <template slot-scope="scope">{{ scope.row.id }}</template>
                    </el-table-column>
                    <el-table-column label="商品名称">
                        <template slot-scope="scope">{{ scope.row.name }}</template>
                    </el-table-column>
                    <el-table-column label="单价/大单位" width="140">
                      <template slot-scope="scope">{{scope.row.luSupplyPrice+'/'+scope.row.lunit}}</template>
                    </el-table-column>
                    <el-table-column label="数量" width="160" align="center">
                        <template slot-scope="scope">{{Math.floor(scope.row.number/scope.row.conversionRatio)}}</template>
                    </el-table-column>
                    <el-table-column  label="单价/小单位" width="140">
                      <template slot-scope="scope">{{scope.row.suSupplyPrice+'/'+scope.row.sunit}}</template>
                    </el-table-column>
                    <el-table-column  label="数量" width="160" align="center">
                      <template slot-scope="scope">{{scope.row.number-Math.floor(scope.row.number/scope.row.conversionRatio)*scope.row.conversionRatio}}</template>
                    </el-table-column>
                    <el-table-column prop="total" label="金额"></el-table-column>
                </el-table>
            </div>
            <div class="fixed-row-height" style="border: 0 solid rgba(228, 228, 228, 1); border-width: 0 1px 1px 1px ; height: 80px; line-hight: 80px; text-align: center;">
                <span>商品共：</span>
                <span>{{this.tableData.length}}</span>
                <span class="sum">金额合计：</span>
                <span>{{total}}</span>
                <span>元</span>
            </div>
        </div>    
    </div>
</template>
<script>
export default{
    created(){
      this.basicInformation = this.$route.query.data;
      console.log(this.basicInformation)
      this.quireData();
    },
    data() {
      return {
        id: 0,
        total: 0,
        basicInformation:{},
        tableData: [],
      }
    },   
     methods: {
        //查询商品表单
      async quireData(){
        //    访问后端接口，实现查询
          const {data:resp} = await this.$http.get("/Receipt/searchRecGoods",{params:{id:this.basicInformation.id}});
          this.tableData = resp.data
          if(resp.code == 0){
            this.tableData = resp.data;
          }else{
            this.$message.error(resp.message);
          }  
        },   
    },
  watch: {
  tableData: {
    handler(newData) {
      newData.forEach(item => {
        item.total = Number(item.number)*Number(item.suSupplyPrice);
        this.total = newData.reduce((total, item) => total + item.total, 0);
        
      })
    },
    deep: true
  }
  }    
}

</script>

<style scoped>
.heade-text1{
    border: 1px solid rgba(228, 228, 228, 1);
    display: flex;
    justify-content: space-around;
    height: 80px;
    line-height: 80px;
    text-align: center;
}
.text{
    font-size: 14px;
    position: absolute;
    left: 12px;
}
.header{
    position: relative;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: rgba(243, 243, 243, 1);
    border: 1px solid rgba(228, 228, 228, 1);
}
.end .header{
    margin-top: 20px;
}
.end span{
    font-size: 14px;
}
.fixed-row-height {
  border: 0 solid rgba(228, 228, 228, 1); 
  border-width: 0 1px 1px 1px ; 
  height: 80px;
    line-height: 80px; 
  text-align: center;
}
.sum{
    margin-left: 20px;
}
</style>